<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 
        data与el的两种写法：
            1、el有两种写法：
                1、new Vue 时配置el属性
                2、先创建Vue实例，随后在通过vm.$mount('#root')指定el的值
            2、data有两种写法
                1、对象式
                2、函数式
                如何选择：目前哪种写法都可以，但当使用到组件时，data必须使用函数式，否则会报错。
            3、一个重要原则：
                有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例了
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>

</body>
    <script type="text/javascript">

        //el的两种写法
        // const v = new Vue({
        //     // el:'#root',    //第一种写法
        //     data:{
        //         name:'Tom'
        //     }
        // })       
        // console.log(v)
        // v.$mount('#root')   //第二种写法


        new Vue({
            el:'#root',    
            //data的第一种写法：对象式
            // data:{
            //     name:'Tom'
            // }

            //data的第二种写法：函数式
            data:function(){
                console.log(this)    //此处的this是Vue实例对象
               return{
                name:'Tom'
               }
            }
        })  
    </script>

</html>